<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-08-15 16:45:26
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2023-01-02 11:02:52
 * @FilePath: \grazlink20\uc_sys\src\views\Asset\Quarantine\components\See.vue
 * Copyright (c) 2022 by 李天惊 uf_lee@163.com, All Rights Reserved. 
 * 检验检疫记录单-查看
-->
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElButton } from 'element-plus'

import { ContentWrap } from '@/components/ContentWrap'
import { Descriptions } from '@/components/Descriptions'
import { UploadMultiple } from '@/components/UploadMultiple'
import { Dialog } from '@/components/Dialog'
import { Table } from '@/components/Table'

import { adminFaQuarantineOrderSeeApi } from '@/api/fa/quarantine'
// 获取字典
import { useIcon } from '@/hooks/web/useIcon'
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()

/****************************** 变量 start ******************************/
const dict: any = wsCache.get('dict')
const data = ref<any>({})
const iconFile = useIcon({ icon: 'ic:outline-file-present' })
const actionType = ref('')
const dialogVisible = ref(false)
const dialogTitle = ref('')
const d_row = ref<any>({})
const dFile = ref([])

const schema = reactive<DescriptionsSchema[]>([
  {
    field: 'id',
    label: '主键'
  },
  {
    field: 'code',
    label: '检验检疫记录单号'
  },
  {
    field: 'customer_name',
    label: '所属牧场'
  },
  {
    field: 'breed',
    label: '畜别'
  },
  {
    field: 'breed_sub',
    label: '品种'
  },
  {
    field: 'number',
    label: '牲畜数量'
  },
  {
    field: 'type',
    label: '类型'
  },
  {
    field: 'state',
    label: '状态'
  },
  {
    field: 'quarantine_number',
    label: '检验数量'
  },
  {
    field: 'creation_time',
    label: '创建时间'
  },
  {
    field: 'creation_user_name',
    label: '创建人'
  }
])

const d_columns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: '序号',
    type: 'index',
    width: 30
  },
  {
    field: 'earcon_code',
    label: '资产编码',
    width: 150
  },
  {
    field: 'earcon_film_code',
    label: '耳标号',
    width: 150
  },
  {
    field: 'earcon_breed',
    label: '畜别',
    width: 150
  },
  {
    field: 'earcon_breed_sub',
    label: '品种',
    width: 150
  },
  {
    field: 'earcon_purpose',
    label: '用途',
    width: 150
  },
  {
    field: 'earcon_sex',
    label: '性别',
    width: 150
  },
  {
    field: 'earcon_month_age',
    label: '月龄',
    width: 150
  },
  {
    field: 'state',
    label: '状态',
    width: 150
  },
  {
    field: 'note',
    label: '备注',
    width: 150
  },
  {
    field: 'creation_time',
    label: '创建时间',
    width: 180
  },
  {
    field: 'action',
    width: 60,
    fixed: 'right',
    label: '操作'
  }
])
/****************************** 变量 end ******************************/

/****************************** 组件参数 start ******************************/
// 获取参数
const props = defineProps({
  id: {
    type: String,
    default: null
  }
})
/****************************** 组件参数 end ******************************/

/****************************** 函数方法 start ******************************/
// 字典通过value获取label
const getDictLabel = (type, value) => {
  let data = dict[type].find((item) => {
    return item.value == value
  })
  return data ? data.label : ''
}

// 调用查看接口获取信息
const getQuarantineOrderSee = async () => {
  if (props.id) {
    const res = await adminFaQuarantineOrderSeeApi({ id: props.id })
      .catch(() => {})
      .finally(() => {})
    if (res) {
      data.value = res.data
    }
  } else {
    data.value.detailedData = []
    data.value.fileData = []
  }
}

const action = async (type: string, row: any = {}) => {
  actionType.value = type
  switch (type) {
    case 'file_d':
      dialogTitle.value = '附件'
      d_row.value = row
      if (row.file) {
        dFile.value = JSON.parse(row.file)
      } else {
        dFile.value = []
      }
      dialogVisible.value = true
      break
    default:
      console.log('未知类型')
  }
}
/****************************** 函数方法 end ******************************/

/****************************** 初始化 start ******************************/
const init = async () => {
  // 调用查看接口查询数据
  await getQuarantineOrderSee()
}
init()
/****************************** 初始化 end ******************************/
</script>

<template>
  <div>
    <ContentWrap title="主数据">
      <Descriptions :schema="schema" :data="data">
        <template #breed="{ row }: { row: any }">
          <div>{{ getDictLabel('breed', row.breed) }}</div>
        </template>
        <template #breed_sub="{ row }: { row: any }">
          <div>{{ getDictLabel('breed_sub', row.breed_sub) }}</div>
        </template>
        <template #type="{ row }: { row: any }">
          <div>{{ getDictLabel('quarantine_order_type', row.type) }}</div>
        </template>
        <template #state="{ row }: { row: any }">
          <div>{{ getDictLabel('quarantine_order_state', row.state) }}</div>
        </template>
      </Descriptions>
    </ContentWrap>
    <ContentWrap title="附件">
      <UploadMultiple
        ref="fileRef"
        v-model="data.fileData"
        :response="{
          url: 'file_url',
          name: 'file_name',
          file_type: 'file_type'
        }"
        disabled
      />
    </ContentWrap>
    <ContentWrap title="明细数据">
      <Table :columns="d_columns" :data="data.detailedData" :selection="false" :border="true">
        <template #earcon_breed="{ row }: { row: any }">
          <div>{{ getDictLabel('breed', row.earcon_breed) }}</div>
        </template>
        <template #earcon_breed_sub="{ row }: { row: any }">
          <div>{{ getDictLabel('breed_sub', row.earcon_breed_sub) }}</div>
        </template>
        <template #earcon_purpose="{ row }: { row: any }">
          <div>{{ getDictLabel('purpose', row.earcon_purpose) }}</div>
        </template>
        <template #earcon_sex="{ row }: { row: any }">
          <div>{{ getDictLabel('animal_sex', row.earcon_sex) }}</div>
        </template>
        <template #state="{ row }: { row: any }">
          <div>{{ getDictLabel('quarantine_order_detailed_state', row.state) }}</div>
        </template>

        <template #action="{ row }">
          <ElButton circle :icon="iconFile" @click="action('file_d', row)" title="附件" />
        </template>
      </Table>
    </ContentWrap>

    <Dialog v-model="dialogVisible" :title="dialogTitle">
      <div>
        <UploadMultiple
          ref="dFileRef"
          v-model="dFile"
          :response="{
            url: 'file_url',
            name: 'file_name',
            file_type: 'file_type'
          }"
          disabled
        />
      </div>

      <template #footer>
        <ElButton @click="dialogVisible = false">关闭</ElButton>
      </template>
    </Dialog>
  </div>
</template>
